<script setup>
import navbar from "@/components/navbar.vue";
import { ref, onBeforeUnmount, onMounted, onUpdated, onUnmounted, reactive, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "../../store/useStore";
const store = useStore()
const router = useRouter()
const title = "发现";
const data = ref([
  {
    id: 1,
    name: "朋友圈",
    icon: "wechat-moments",
  },
  {
    id: 2,
    name: "视频号",
    icon: "live",
  },
  {
    id: 3,
    name: "直播",
    icon: "stop-circle",
  },
  {
    id: 4,
    name: "扫一扫",
    icon: "enlarge",
  },
  {
    id: 5,
    name: "听一听",
    icon: "audio",
  },
  {
    id: 6,
    name: "看一看",
    icon: "eye",
  },
  {
    id: 7,
    name: "搜一搜",
    icon: "search",
  },
  {
    id: 8,
    name: "附近",
    icon: "friends",
  },
  {
    id: 9,
    name: "购物",
    icon: "cart-circle",
  },
  {
    id: 10,
    name: "游戏",
    icon: "gem",
  },
  {
    id: 11,
    name: "小程序",
    icon: "photo-fail",
  },
]);
//微信朋友圈
const isWeChatMoments = ref(false)
const closesWeChatMoments = () => {
  isWeChatMoments.value = false
}
const liAll = (item) => {
  // console.log(item.name);
  if (item.name == "朋友圈") {
    isWeChatMoments.value = true
  } else if (item.name == '扫一扫') {
    router.push('scan')
  }
}
//底部弹出层
const isPyqBottom = ref(false)
const setCamera = () => {
  isPyqBottom.value = true
  // console.log("相机");
}
const showShoot = ref(false)
const shoot = () => {
  console.log("拍摄");
  isPyqBottom.value = false
  showShoot.value = true
}
const photoAlbum = () => {
  console.log("从相册选择");
}

//相机
const localVideo = ref(null);
const isCalling = ref(false)
const localStream = ref(null)
const qq = ref()
const videoStream = ref(null);
const photoUrl = ref(null);
const videoElement = ref(null);
const startCall = async () => {
  if (isCalling.value) {
    console.warn('Call is already in progress.');
    return;
  }
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    // console.log(stream,111);  
    qq.value = stream
    // 将视频流赋值给videoStream引用  
    videoStream.value = stream;
    // 如果video元素已经挂载到DOM上，则将视频流设置为video元素的源  

    nextTick(() => {
      if (videoElement.value) {
        videoElement.value.srcObject = stream;
      }
    })

  } catch (error) {
    console.error('Failed to start call:', error);
  }
}
const stopCall = () => {
  if (videoStream.value && videoElement.value) {
    // 创建一个新的canvas元素  
    const canvas = document.createElement('canvas');
    // 获取canvas的2D渲染上下文  
    const context = canvas.getContext('2d');
    // 设置canvas的宽高为视频流的宽高  
    canvas.width = videoElement.value.videoWidth;
    canvas.height = videoElement.value.videoHeight;
    // 将视频流的当前帧绘制到canvas上  
    context.drawImage(videoElement.value, 0, 0, canvas.width, canvas.height);
    // 将canvas的内容转换为图片URL，并赋值给photoUrl引用  
    photoUrl.value = canvas.toDataURL('image/png');
    console.log(photoUrl, 111);
    // localStorage.setItem('img', photoUrl.value)
    store.setImgs(photoUrl.value)
  }
}
const chaAB = () => {
  //关闭摄像头
  qq.value.getTracks().forEach(track => {
    track.stop();
  });
  //关闭屏幕共享
  // console.log(qq.value,111111111111);
  showShoot.value = false
}
onUpdated(() => {
  if (localVideo.value) {
    setTimeout(() => {
      localVideo.value.srcObject = localStream.value;
    }, 666);
  }
});

onUnmounted(() => {
  // 如果视频流存在，则停止所有轨道以释放摄像头  
  if (videoStream.value) {
    videoStream.value.getTracks().forEach(track => track.stop());
  }
}); 
</script>

<template>
  <navbar :title="title" showSearch="true" />
  <div class="find">
    <van-cell :title="item.name" :icon="item.icon" v-for="item in data" :key="item.id" @click="liAll(item)" is-link />
  </div>
  <van-popup v-model:show="isWeChatMoments" position="right" :style="{ width: '100%', height: '100%' }">
    <Navbar title="朋友圈" showLeft="true" showCamera="true" @setCamera="setCamera"
      @closeshowRight="closesWeChatMoments" />
    <div class="pyq" id="video-box">
      <video class="video-background" preload="auto" loop playsinline autoplay
        src="/public/b_W6kgR25uSmnj1618657350_10s.mp4" tabindex="-1" muted="muted"></video>
      <div class="pyqBox">
        <div><b>{{ store.info.nickname }}</b></div>
        <div><img :src="store.info.avatar" alt=""></div>
      </div>
    </div>
  </van-popup>
  <!-- 底部弹出 -->
  <van-popup v-model:show="isPyqBottom" position="bottom" :style="{ height: '20%' }">
    <div class="popupDiv">
      <div @mouseup="shoot" @mousedown="startCall" :disabled="isCalling">拍摄</div>
      <div @click="photoAlbum">从相册选择</div>
      <div @click="() => (isPyqBottom = false)">取消</div>
    </div>
  </van-popup>
  <!-- 拍摄遮罩层 -->
  <van-popup v-model:show="showShoot" position="right" :style="{ width: '100%', height: '100%' }">
    <video ref="videoElement" autoplay class="videoA" v-if="videoStream">蓝屏警告</video>
    <button @click="stopCall" v-if="videoStream" class="stopCallA">拍照</button>
    <div class="stopCallc" @click="chaAB">
      ×
    </div>
    <div class="stopCallVV">
      <img v-if="photoUrl" :src="photoUrl" alt="请拍摄!!" class="stopCallV">
    </div>
  </van-popup>
</template>

<style scoped>
.stopCallc {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 30px;
  left: 28px;
  z-index: 999;
  width: 30px;
  height: 30px;
  border-radius: 60px;
  border: none;
}

.stopCallVV {
  position: absolute;
  top: 535px;
  left: 30px;
  z-index: 1000;
  width: 80px;
  height: 80px;
  border-radius: 18px;
  background-color: aliceblue;
}

.stopCallV {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 999;
  width: 80px;
  height: 80px;
  border-radius: 18px;
  border: none;
}

.stopCallA {
  position: absolute;
  top: 535px;
  right: 150px;
  z-index: 999;
  width: 80px;
  height: 80px;
  border-radius: 60px;
  border: none;
}

.videoA {
  width: 100%;
  height: 100%;
  /* object-fit: cover; 铺满全屏 */
  max-width: 100%;
  background-color: aquamarine;
  margin-bottom: 10px;
}

.popupDiv {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.videoA {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  max-width: 100%;
  background-color: rgb(0, 0, 0);
  margin-bottom: 10px;
}

.popupDiv {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.popupDiv div {
  width: 100%;
  height: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.popupDiv div:nth-child(3) {
  border-bottom: none;
}

#video-box {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #C1CFF7;
  /*进行视频裁剪*/
  overflow: hidden;
}

#video-box .video-background {
  position: absolute;
  left: 50%;
  top: 50%;
  /*保证视频内容始终居中*/
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /*保证视频充满屏幕*/
  object-fit: cover;
  min-height: 800px;
  object-fit: fill;
}

.pyq {
  width: 100%;
  height: 200px;
  background-color: sandybrown;
  position: relative;
}

.pyqBox {
  width: 140px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: aqua; */
  position: fixed;
  top: 210px;
  right: 20px;
}

.pyqBox div:nth-child(1) {
  color: white;
  width: 80px;
  height: 50px;
  /* line-height: 50px; */
  /* border-radius: 50%; */
  text-align: center;
  /* background-color: sandybrown; */
}

.pyqBox div:nth-child(2) {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgb(3, 255, 95);
}

.pyqBox div:nth-child(2) img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.find {
  width: 100%;
  height: 90%;
  background-color: rgb(237, 237, 237);
}
</style>
